<div class="play-queue scrollable"
     appDropzone
     (dropData)="drop($event)">
  <div class="queued-tracks-list" *ngIf="playQueue.items.getQueuedItems().length > 0">
    <div class="divider">
      <div class="title">Coming up next</div>
      <div class="btn-group">
        <div class="btn btn-xs btn-default"
             (click)="removeQueuedItems()">
          <i class="fa fa-trash"></i>
        </div>
      </div>
    </div>
    <div *ngFor="let playQueueItem of playQueue.items.getQueuedItems()"
         appDraggable="true"
         [dragData]="playQueueItem.track.toJSON()"
         [dragImageUrl]="playQueueItem.track.image.getSmallSizeUrl()"
         dragEffect="copy">
      <app-context-menu>
        <div class="track">
          <app-track-cover [track]="playQueueItem.track" [size]="coverSize"></app-track-cover>
          <div class="details"
               [class.dummy]="!playQueueItem.track.artist.getFullName() && !playQueueItem.track.title">
            <div style="display: flex; align-items: center">
              <b class="title"
                 style="flex-grow: 1; width: inherit; overflow: hidden; text-overflow: ellipsis;"
                 [title]="playQueueItem.track.title">
                {{playQueueItem.track.title}}
              </b>
            </div>
            <div class="artist">{{playQueueItem.track.artist.getFullName()}}</div>
            <div class="stats">
              <div class="duration">
                <i class="fa fa-clock-o" aria-hidden="true" alt="play count"></i>
                {{playQueueItem.track.duration | hReadableSeconds}}
              </div>
              <div *ngIf="playQueueItem.track.genre && playQueueItem.track.genre.length>0"
                   class="genre">
                <i class="fa fa-dot-circle-o" aria-hidden="true" alt="genre"></i>
                {{playQueueItem.track.genre[0]}}
              </div>
            </div>
          </div>
        </div>
        <app-add-to-queue-option [track]="playQueueItem.track" hidden></app-add-to-queue-option>
        <app-add-to-playlist-option [track]="playQueueItem.track" hidden></app-add-to-playlist-option>
      </app-context-menu>
    </div>
  </div>

  <div class="scheduled-tracks-list" *ngIf="hasScheduledItems()">
    <div class="divider">
      <div class="title">Scheduled Tracks</div>
      <div class="btn-group">
        <div class="btn btn-xs btn-default"
             (click)="removeScheduledItems()">
          <i class="fa fa-trash"></i>
        </div>
      </div>
    </div>
    <div *ngFor="let playQueueItem of playQueue.items.getScheduledItems() | limitCollectionresults: {limit: 10}"
         appDraggable="true"
         [dragData]="playQueueItem.track.toJSON()"
         [dragImageUrl]="playQueueItem.track.image.getSmallSizeUrl()"
         dragEffect="copy">
      <app-context-menu>
        <div class="track">
          <div class="cover">
            <app-track-cover [track]="playQueueItem.track" [size]="coverSize"></app-track-cover>
          </div>
          <div class="details"
               [class.dummy]="!playQueueItem.track.artist.getFullName() && !playQueueItem.track.title">
            <b class="title" [title]="playQueueItem.track.title">
              {{playQueueItem.track.title}}
            </b>
            <div class="artist">{{playQueueItem.track.artist.getFullName() || 'None'}}</div>
            <div class="stats">
              <a class="provider"
                 [href]="playQueueItem.track.externalLink"
                 target="_blank"
                 title="Open in {{providerMap[playQueueItem.track.provider].title}}">
                <span class="{{providerMap[playQueueItem.track.provider].icon}}"></span>
              </a>
              <div class="duration">
                <i class="fa fa-clock-o" aria-hidden="true" alt="play count"></i>
                {{playQueueItem.track.duration | hReadableSeconds}}
              </div>
              <div *ngIf="playQueueItem.track.genre && playQueueItem.track.genre.length>0"
                   class="genre"
                   title="Track category">
                <i class="fa fa-dot-circle-o" aria-hidden="true" alt="genre"></i>
                {{playQueueItem.track.genre[0]}}
              </div>
            </div>
          </div>
        </div>
        <app-add-to-queue-option [track]="playQueueItem.track" hidden></app-add-to-queue-option>
        <app-add-to-playlist-option [track]="playQueueItem.track" hidden></app-add-to-playlist-option>
      </app-context-menu>
    </div>
    <div *ngIf="playQueue.items.isLooped()">
      <div *ngFor="let playQueueItem of playQueue.items.getStoppedItems() | limitCollectionresults: {limit: 10}"
           appDraggable="true"
           [dragData]="playQueueItem.track.toJSON()"
           [dragImageUrl]="playQueueItem.track.image.getSmallSizeUrl()"
           dragEffect="copy">
        <app-context-menu>
          <div class="track">
            <div class="cover">
              <app-track-cover [track]="playQueueItem.track" [size]="coverSize"></app-track-cover>
            </div>
            <div class="details"
                 [class.dummy]="!playQueueItem.track.artist.getFullName()">
              <b class="title" [title]="playQueueItem.track.title">
                {{playQueueItem.track.title || 'None'}}
              </b>
              <div class="artist">{{playQueueItem.track.artist.getFullName() || 'None'}}</div>
              <div class="stats">
                <a class="provider"
                   [href]="playQueueItem.track.externalLink"
                   target="_blank"
                   title="Open in {{providerMap[playQueueItem.track.provider].title}}">
                  <span class="{{providerMap[playQueueItem.track.provider].icon}}"></span>
                </a>
                <div class="duration">
                  <i class="fa fa-clock-o" aria-hidden="true" alt="play count"></i>
                  {{playQueueItem.track.duration | hReadableSeconds}}
                </div>
                <div *ngIf="playQueueItem.track.genre && playQueueItem.track.genre.length>0"
                     class="genre"
                     title="Track category">
                  <i class="fa fa-dot-circle-o" aria-hidden="true" alt="genre"></i>
                  {{playQueueItem.track.genre[0]}}
                </div>
              </div>
            </div>
          </div>
          <app-add-to-queue-option [track]="playQueueItem.track" hidden></app-add-to-queue-option>
          <app-add-to-playlist-option [track]="playQueueItem.track" hidden></app-add-to-playlist-option>
        </app-context-menu>
      </div>
    </div>
  </div>

  <app-empty-state
    *ngIf="showDragAndDropHelp"
    class="drag-and-drop-help"
    title="Drop track here to queue it"
    icon="fa fa-queue">
  </app-empty-state>

  <app-empty-state
    *ngIf="!hasScheduledItems() && playQueue.items.getQueuedItems().length === 0"
    class="no-items"
    title="Your play queue is empty"
    icon="fa fa-queue">
  </app-empty-state>

</div>
